<script setup>
import Toast from '@vant/weapp/dist/toast/toast';


import { getSiteImgPath } from '@/utils/auth'
import { ref, onMounted } from 'vue'

defineProps({
    active: {
        type: Number,
        default: 1
    }
})


function toTabsPage(index) {
    uni.hideTabBar();
    switch (index) {
        case 1:
            uni.switchTab({
                url: '/pages/painting/index'
            })
            break;
        case 2:
            uni.navigateTo({
                url: '/pages/chat/index'
            })
            break;
        case 3:
            uni.switchTab({
                url: '/pages/home/index'
            })
            break;
        case 4:
            uni.switchTab({
                url: '/pages/my/index'
            })
            break;
        default:
            Toast.showToast('功能正在开发，敬请期待...')
            break;
    }
}
</script>

<template>
    <div class='tabbar_box'>
        <div class="fixed">
            <div class="item" @click="toTabsPage(1)">
                <image v-if="active !== 1" src="/static/imgs/nav/xin/painting.png" class="iconSty" alt="" />
                <image v-else src="/static/imgs/nav/xin/paintingA.png" class="iconSty" alt="" />
                <div :class="{ active: active === 1 }">绘画</div>
            </div>
            <div class="item" @click="toTabsPage(2)">
                <image v-if="active !== 2" src="/static/imgs/nav/xin/lticon.png" class="iconSty" alt="" />
                <image v-else src="/static/imgs/nav/xin/lticon.png" class="iconSty" alt="" />
                <div :class="{ active: active === 2 }">deepseek</div>
            </div>
            <div class="item" @click="toTabsPage(3)">
                <image v-if="active !== 3" src="/static/imgs/nav/xin/czicon.png" class="iconSty" alt="" />
                <image v-else src="/static/imgs/nav/xin/czicon1.png" class="iconSty" alt="" />
                <div :class="{ active: active === 3 }">创作</div>
            </div>

            <div class="item" @click="toTabsPage(4)">
                <image v-if="active !== 4" src="/static/imgs/nav/xin/wdicon.png" class="iconSty" alt="" />
                <image v-else src="/static/imgs/nav/xin/wdicon1.png" class="iconSty" alt="" />
                <div :class="{ active: active === 4 }">我的</div>
            </div>
        </div>
    </div>
    <my-toast id='my-toast' ref='myToast'></my-toast>
</template>

<style lang='scss' scoped>
.tabbar_box {
    height: 136rpx;
    padding-bottom: env(safe-area-inset-bottom);


    .fixed {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 136rpx;
        padding-bottom: env(safe-area-inset-bottom);
        box-shadow: 0rpx -4rpx 20rpx 0rpx rgba(0, 0, 0, 0.08);
        background: var(--a-main-tabNav-bg-color);
        display: flex;
        align-items: center;
        justify-content: space-around;
        z-index: 100;

        .item {
            font-size: 20rpx;
            color: #98A09C;
            text-align: center;

            .active {
                color: var(--a-main-color);
            }

            .iconSty {
                width: 60rpx;
                height: 60rpx;
            }
        }
    }
}
</style>